<template>
    <div class="body">
        <div class="title">
                <h1>{{ $store.getters.getSiteTitle }}</h1>
            </div>
        <div class="border-bg">
            <div id="in-border">
                <h2>注册界面</h2>
                <p>账号：<input type="text" v-model="acc"></p>
                <p>密码：<input type="password" v-model="pwd"></p>
                <p>昵称：<input type="text" v-model="name"></p>
                <input type="radio" value="1" v-model="roleId">管理员
                <input type="radio" value="2" v-model="roleId">医生
                <input type="radio" value="3" v-model="roleId">收费员

                <p>验证码：<input type="text" v-model="code">
                <img :src="codeUrl" alt="" @click="changeCode"></p>
            </div>
            
            <br>
            <el-button @click="doLogin">登录</el-button>
            <el-button @click="doReg">注册</el-button>
        </div>
    </div>
</template>
<script>
export default {
    name:"registerView",
    data(){
        return {
            acc:"",
            pwd:"",
            name:"",
            code:"",
            codeUrl:"/test/code/createCode",
            roleId: ['1'], //默认选中的某一项
        }
    },
    created(){
        alert("验证码已经自动发送到qq邮箱，请到邮箱接收")
        // console.log(this.$store)
        
    },
    methods:{
        doReg(){
            this.$axios.post(
                "/admin/reg",
                {
                    acc:this.acc,
                    pwd:this.pwd,
                    name:this.name,
                    roleId:this.roleId,
                    code:this.code
                }
            ).then(res =>{
                console.log(res) //拿到token
                if(res.code == 1){
                    alert("注册成功")        
                    this.$router.push("login")
                }else if(res.code == 0){
                    alert("注册失败，请重新注册")
                }else if(res.code == 2){
                    alert("验证码错误")
                    this.changeCode()
                }else if(res.code == -1) {
                    alert("改用户信息已经注册")
                }
            })
        },
        doLogin(){
            this.$router.push("/login")
            this.changeCode()
        },
        changeCode(){
            this.codeUrl = "/test/code/createCode?a=" + new Date().getTime()
        }
    }
}
</script>
<style scoped>
    .border-bg{
        border:2px solid rgb(128, 134, 227);
        margin: -2.5em auto 2em;
        width: 40%;
        height: 55%;
        background-color: rgba(113, 189, 244, 0.5);
        padding: auto;
        border-radius: 15px;
    }
    .body{
        margin-top: -25px;
        height: 104vh;
        background-image: url("../static/img/loginBg.jpg");
        background-size: 100% 100%;
    }
    .title{
        padding: 5%;
    }
    p{
        font-size: 20px;
    }
    img{
        width: 110px;

        /* float: right; */
        /* margin 上右下左 */
        margin: -10px -110px 0 10px; 
        
    }
    #in-border{
        padding: 5px;

    }
</style>